<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<link rel="stylesheet" type="text/css" href="css/search.css" />
		<script src="js/mock.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/database.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="search">
			<form action="#" id="home-form" name="formsd">
				<img src="img/serach.svg" class="search-img">
				<input type="text" name="inputname" id="ss" value="" placeholder="摩托汽配" />
			</form>
			<span id="cancle">取消</span>
		</div>
		<div id="hot-search">
			<h3>热搜</h3>
			<ul id="hot-ul" class="space-between flex-wrap">

			</ul>
		</div>
		<div class="history" id="history">
			<h3>搜索历史</h3>
			<ul id="his-ul" class="flex flex-wrap">

			</ul>
		</div>
		<div id="find">
			<h3>搜索发现</h3>
			<ul id="find-ul" class="flex flex-wrap">

			</ul>
		</div>
	</body>
	<script type="text/javascript">
		function mockhot() {
			var oul = document.getElementById('hot-ul');
			var xhr = new XMLHttpRequest();
			xhr.open('get', '/hotsearch', true);
			xhr.send()
			xhr.onreadystatechange = function() {
				if (this.readyState === 4) {
					if (this.status === 200) {
						var hot = JSON.parse(this.responseText);
						for (var i = 0; i < hot.list.length; i++) {
							var li = document.createElement('li');
							var span = document.createElement('span');
							var p = document.createElement('p');
							span.textContent = hot.list[i].title;
							p.textContent = hot.list[i].main;
							li.classList.add('flex')
							oul.appendChild(li)
							li.appendChild(span)
							li.appendChild(p)
						}
					}
				}
			}
		}
		mockhot()

		function mockhis(obj) {
			var ois = document.getElementById(obj);
			var int = document.getElementById('ss');
			var xhr = new XMLHttpRequest();
			xhr.open('get', '/his', true);
			xhr.send()
			xhr.onreadystatechange = function() {
				if (this.readyState === 4) {
					if (this.status === 200) {
						var his = JSON.parse(this.responseText);
						for (var i = 0; i < his.list.length; i++) {
							var li = document.createElement('li');
							li.textContent = his.list[i].main
							ois.appendChild(li)
							li.addEventListener('touchend', function() {
								int.value = this.textContent
							})
						}
					}
				}
			}
		}
		mockhis("his-ul")
		mockhis("find-ul")

		document.addEventListener('plusready', function() {
			var cancle = document.getElementById('cancle');
			cancle.addEventListener('touchend', function() {
				plus.webview.open('home.html', 's', {}, 'slide-in-left', 400)
			})
		});
		window.onload = function() {
			var int = document.getElementById('ss');
			ss.focus();
		}
	</script>
</html>
